<template>
  <div class="indexResource">
    <div class="indexContainer">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
          <div class="leftProduct">
            <div class="indexTitle">
              <div class="titleBig">
                <img src="@/assets/img/label.png" alt="">
                <h2>推荐产品</h2>
              </div>
            </div>
            <el-row :gutter="10">
              <el-empty :image-size="100" v-if="recommendData.length==0"  description="暂无数据"></el-empty>
              <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" v-for="item in recommendData" :key="item.id">
                <div class="proItem marginBottom" @click="handleProDetail(item.id)">
                  <div class="itemTop">
                    <div class="topLeft">
                      <img src="@/assets/img/icon.png" alt="">
                      <h2 class="fontColor singleLine">{{item.title}}</h2>
                    </div>
                    <p class="topRight">
                      <i class="el-icon-arrow-right"></i>
                    </p>
                  </div>
                  <p class="proDesc fontColor moreLineFour">{{item.description}}</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="18" :lg="6" :xl="6">
          <div class="proRight">
            <h3>热销产品TOP10</h3>
            <div class="rightList">
              <ul>
                <li v-for="(item,index) in topData" :key="item.id" @click="handleProDetail(item.id)">
                  <p class="listTitle singleLine">
                    <span>{{index+1}}.</span>
                    {{item.title}}
                  </p>
                  <p class="listNum">交易量：{{item.transaction}}</p>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>


    </div>
  </div>
</template>
<script>
import { getProductList,proTop } from "@/request/api/index"
export default {
  components: {
    
  },
  props: {},
  data() {
    return {
      params:{
        isRecommend:'1',//是否推荐1是2否
        current:1,
        pageSize:6
      },
      recommendData:[],
      topData:[],
      userId:''
    };
  },
  mounted() { },
  created() {
    this.getList()
    this.getTop()
    if (window.sessionStorage.getItem("userInfo") !== null) {
      let userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
      this.userId = userInfo.id
    }
  },
  methods: {
    // 获取推荐产品
    getList() {
      getProductList(this.params).then(res => {
        if (res.data.code == 1) {
          this.recommendData = res.data.data.totalList
        }
      })
    },
     // 获取top10
     getTop() {
      proTop().then(res => {
        if (res.data.code == 1) {
          this.topData = res.data.data
        }
      })
    },
    // 产品详情
    handleProDetail(id) {
      this.$router.push({
        name: "ApplicationProductsDetail",
        query: {
          id,
          userId: this.userId
        }
      });
    }
  },
};
</script>
<style lang="less" scoped>
@import "./resourceShare.less";
@import "../common.less";
</style>

